var jquery = $, jQuery;
(function($){
    $.fn.extend({
        kjsuiSliderReset:function(opts){
            var div = $(this);
            var sliderContainerDiv = div.find(".kjsuiSlider");
            var showDiv = div.find(".kjsuiSliderShower");
            var sliderDiv = sliderContainerDiv.find(".kjsuiSliderBar");
            if ($.isEmptyObject(opts.orientation) || 'horizontal' == opts.orientation) {
                var showDivWidth = showDiv.outerWidth();
                var divWidth = div.innerWidth();
                if ((showDivWidth - divWidth) > 0){
                    sliderContainerDiv.show();
                    opts.max = showDivWidth - divWidth;
                    opts.value = opts.max;
                    showDiv.css({"margin-left":0 - opts.max});
                    opts.slide = function(event, ui) {
                        showDiv.css({"margin-left":ui.value - opts.max});
                    };
                } else {
                    sliderContainerDiv.hide();
                }
                sliderDiv.slider(opts);
            } else {
                var showDivHeight = showDiv.outerHeight();
                var divHeight = div.innerHeight();
                if ((showDivHeight - divHeight) > 0) {
                    sliderContainerDiv.show();
                    opts.max = showDivHeight - divHeight;
                    opts.value = 0;
                    showDiv.css("margin-top", 0-opts.max);
                    opts.slide = function(event, ui) {
                        showDiv.css("margin-top", ui.value - opts.max);
                    };
                } else {
                    sliderContainerDiv.hide();
                }
                sliderDiv.slider(opts);
            }
        },
        kjsuiSlider:function(options){
            var defaults = {};
            var opts = $.extend(defaults, options);
            var div = $(this);
            var showDiv = $(div.html());
            var clazz = showDiv.attr("class");
            if ($.isEmptyObject(clazz)) {
                showDiv.attr("class", "kjsuiSliderShower");
            } else {
                showDiv.attr("class", clazz + " kjsuiSliderShower");
            }
            div.html("");
            div.css({"overflow":"hidden"});
            var divHtml = "<div/>";
            var sliderContainerDiv = $(divHtml);
            sliderContainerDiv.attr("class", "kjsuiSlider");
            var w = 0;var h = 0;var handleS = 0;var pv = 0;var ph =0;var mt = 0;var ml = 0;var handleW = 0;
            var handleH = 0;var sliderDiv = $(divHtml);
            sliderDiv.css({
                width:"100%",
                height:"100%"
            });
            sliderDiv.attr("class", "kjsuiSliderBar");
            sliderContainerDiv.append(sliderDiv);
            div.append(sliderContainerDiv);
            div.append(showDiv);
            if ($.isEmptyObject(opts.orientation) || 'horizontal' == opts.orientation) {
                //水平方向滚动条
                w = div.innerWidth();
                h = 20;
                handleS = parseInt(w * 0.2);
                if (handleS < 30){
                    handleS = 30;
                }
                if (handleS > 100){
                    handleS = 100
                }
                ph = handleS/2;
                w = w - handleS;
                mt = div.innerHeight() - 20;
                handleW = handleS;
                handleH = 10;
                div.kjsuiSliderReset(opts);
                sliderDiv.find(".ui-slider-handle").css({
                    top:5,
                    "margin-left":0-ph
                });
            } else {
                w = 20;
                h = div.innerHeight();
                handleS = parseInt(h * 0.2);
                if (handleS < 30){
                    handleS = 30;
                }
                if (handleS > 100){
                    handleS = 100
                }
                pv = handleS/2;
                h = h - handleS;
                ml = div.innerWidth() - 20;
                handleW = 10;
                handleH = handleS;
                div.kjsuiSliderReset(opts);
                sliderDiv.find(".ui-slider-handle").css({
                    left:5,
                    "margin-bottom": 0-pv
                });
            }
            sliderContainerDiv.css({
                width:w,
                height:h,
                padding:pv + "px " + ph +"px",
                position:"absolute",
                "margin-top":mt,
                "margin-left":ml
            });
            sliderDiv.find(".ui-slider-handle").css({
                width:handleW,
                height:handleH
            });
        }
    });
})(jquery);